<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul li {
				list-style: none;
				float: left;
				width: 30px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				color: rgba(255, 255, 255, .8);
				font-size: 14px;
			}

			.banner {
				max-width: 1200px;
				margin: 0 auto;
				position: relative;
				margin-top: 60px;
			}

			.banner img {
				width: 100%;
				display: block;
			}

			.banner .page {
				background: rgba(0, 0, 0, .5);
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
			}

			.banner .page ul {
				float: right;
			}

			.current {
				color: #ff6700;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="banner">
				<div class="item">
					<img :src="dataList[currentIndex]" @mouseover="stop" @mouseleave="runInv">
				</div>
				<div class="page" v-if="this.dataList.length > 1">
					<ul>
						<li @click="gotoPage(prevIndex)" @mouseover="stop" @mouseleave="runInv">&lt;</li>
						<li v-for="(item,index) in dataList" @click="gotoPage(index)" :class="{'current':currentIndex == index}" @mouseover="stop" @mouseleave="runInv">
							{{index+1}}</li>
						<li @click="gotoPage(nextIndex)" @mouseover="stop" @mouseleave="runInv">&gt;</li>
					</ul>
				</div>
			</div>
		</div>
		<script>
			const vm = new Vue({
				el: "#app",
				data: {
					dataList: [
						"https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg",
						"https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg",
						"https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg"
					],
					currentIndex: 0, //默认显示图片
					timer: null //定时器
        },
        computed: {
					//上一张
					prevIndex() {
						if (this.currentIndex == 0) {
							return this.dataList.length - 1;
						} else {
							return this.currentIndex - 1;
						}
					},
					//下一张
					nextIndex() {
						if (this.currentIndex == this.dataList.length - 1) {
							return 0;
						} else {
							return this.currentIndex + 1;
						}
          }
        },
				methods: {
					gotoPage(index) {
           this.currentIndex = index;
					},
					stop(){
						clearInterval(this.timer)
					},
          runInv(){
						this.timer = setInterval(() => {
							this.gotoPage(this.nextIndex);
						}, 1500)
        }
      },
          mounted(){
            this.runInv();
          }
			})
		</script>
	</body>
</html>
